<template>
	<view class="center-box">
		<!-- <view class="head_box">
			<yy-custom bgColor="bg-gradual-blue">
				<block slot="backText">返回</block>
				<block slot="content">导航栏</block>
			</yy-custom>
		</view> -->

		<u-navbar back-icon-name="arrow-left" title-size="36" back-text="" :back-icon-size="50" title="发布" :title-bold="true">
			<view class="navbar-right" slot="right">
				<view v-if="add == 1" class="message-box right-item" @click="issue" style="padding-right: 32rpx; color: #666666;">发布</view>
			</view>
		</u-navbar>

		<view class="release-box">
			<view class="center-release">
				<view class="box-show mb30"><textarea placeholder="记录这一刻传递给懂你的人~" v-model="value" maxlength="1500"></textarea></view>
				<!-- flex-wrap: wrap; -->
				<view class="ww100 flex flex-wrap upload-image">
					<u-upload width="217" height="217" max-count="9" :action="action" @on-remove="onRemoveIMg" @on-success="onSuccessImg" upload-text=""></u-upload>
				</view>

				<view class="mt225 p28" style="font-family: PingFang SC;">
					<u-tag :text="'#' + item.topic" type="success" color="#333333" border-color="#DBDBDB" bg-color="#FFFFFF" v-for="(item, index) in list" :key="index" />
				</view>
			</view>
		</view>

		<view class="fiex-tab flex">
			<view class="f22" style="color: #333333;" @click="addMap">
				<i class="ml8 cuIcon-locationfill f44" style="color: #999999;"></i>
				<text>成都市</text>
			</view>
			<view class="" @click="l.to('/pages/home/topicList')">
				<image src="../../static/img/ht.png" class="w40 h40 ml68 mr13" mode=""></image>
				<text>话题</text>
			</view>
		</view>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import amap from '@/commonsdk/SDK/amap-wx.js';
export default {
	data() {
		return {
			leng: 0,
			value: '',
			list: [],
			action: this.UPLOADFILE,
			address: '',
			imgList: [],
			add: 1
		};
	},
	onShow() {
		this.list = uni.getStorageSync('topicelist');
		if(this.list) {
			this.list.forEach(i => {
				i.topicId = i.id;
			});
		}
		
	},
	onLoad(e) {},
	methods: {
		inputCenter(e) {
			this.leng = e.detail.value.length;
		},

		onRemoveIMg(index) {
			this.imgList.splice(index, 1);
		},

		onSuccessImg(e, index) {
			var obj = {};
			obj.img = e.data;
			this.imgList.push(obj);
		},

		addMap() {
			var that = this;
			uni.chooseLocation({
				success: function(res) {
					console.log('位置名称111：' + res.name);
					console.log('详细地址：' + res.address);
					that.address = res.address
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
				}
			});
			
		},

		async issue() {
			this.list.forEach(i => {
				i.topicId = i.id;
				delete i.id;
				delete i.isRecommend;
				delete i.addDate;
				delete i.updateDate;
			});
			console.log(this.list);

			this.add == 2;
			const res = await this.$u.post('api/user/dyn/publish', {
				address: this.address ? this.address : '四川省成都市金牛区荷花池街道肖家村二巷甲级写字楼C座',
				apiUserDynamicImgList: this.imgList,
				apiUserDynamicTopicList: this.list,
				id: uni.getStorageSync('userInfo').id,
				dynamic: this.value
			});
			this.l.msgg(res.msg);
			if (res.code == 200) {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.center-box {
	width: 100%;
	padding-bottom: 100rpx;

	.release-box {
		width: 100%;
		padding: 30rpx;
		border-top: 2rpx solid #f5f5f5;

		.u-tag {
			padding: 19rpx 32rpx;
			border-radius: 32rpx;
			margin: 10rpx 20rpx;
		}

		.box-show {
			padding: 30rpx;
			width: 690rpx;
			height: 280rpx;
			color: #999999;
			background: #ffffff;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 10rpx;

			uni-textarea {
				width: 100%;
				height: 100%;
			}
		}

		.upload-image {
			// image {
			// 	border: 10rpx;
			// 	margin-right: 20rpx;
			// 	margin-bottom: 24rpx;
			// }

			/deep/.u-list-item[data-v-3d60ab68] {
				margin: 7rpx;
			}

			/deep/.u-list-item[data-v-3d60ab68]:nth-child(3n) {
				margin-right: 0px;
			}
		}
	}

	.fiex-tab {
		width: 100%;
		height: 95rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 26rpx 28rpx;
		border-top: 2rpx solid #f5f5f5;
	}
}
</style>
